<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入 vue  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            组件是可复用的 Vue 实例，且带有一个名字。在这个例子中名字是 button-counter。
            我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
         -->
         <button-counter></button-counter>
         <br>
         <!-- 组件可以进行任意次数的复用 -->
         <button-counter></button-counter>
         <br>
         <button-counter></button-counter>
         <br>
         <button-counter></button-counter>
    </div>    
</body>
</html>

<script>
    // 组件定义和 new Vue实例是同级的
    // 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。有两种组件的注册类型：全局注册和局部注册。
    // 该案例中只通过 Vue.component 全局注册的
    Vue.component('button-counter',{
        // 坑！ 注意这里的data写法，不能写属性
        // 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
        data:function(){ 
            // return 返回的是一个对象
            return{
                count:0
            }
        },
        template:`<button @click="count++">You clicked me {{count}} times</button>`
    })

    var vm = new Vue({
        el:"#app",
    })
</script>
